<script setup lang="ts">
import footerBtn from "@/components/footerBtn/index.vue";
import { Tips, uploadImageOne, JumpPath, uploadImgs } from "@/utils";
import { getSave } from "@/api/user";
import Cache from "@/utils/cache";
import { USER_INFO } from "@/config/cache";
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
import { hidePageNavInWechatBrowser } from "@/composables/useHiddenNavbar";
import { getBaseUrl, getUploadUrl } from "@/utils/env";
import { pathToBase64 } from "@/plugin/image-tools/index.js";
import hideWechatMenu from "@/composables/hideWechatMenu";
onShow(() => {
  hideWechatMenu();
});
const HTTP_REQUEST_URL = getBaseUrl();
const HTTP_UPLOAD_URL = getUploadUrl();
onReady(() => {
  hidePageNavInWechatBrowser();
});
onLoad(() => {
  try {
    const infoData = JSON.parse(Cache.get(USER_INFO));

    enterprise_name.value = infoData.enterprise_name;
    enterprise_address.value = infoData.enterprise_address;
    nature_of_business.value = infoData.nature_of_business;
    logoImg.value = infoData.logo;
    userList.value = infoData.contacts;
  } catch (error) {}
});
let enterprise_name = ref("");
let enterprise_address = ref("");
let nature_of_business = ref("");

function submitHandler() {
  // if (!logoImg.value) return Tips({ title: "请上传企业logo" });
  if (!enterprise_name.value) return Tips({ title: "请填写企业名称" });
  if (!enterprise_address.value) return Tips({ title: "请输入企业地址" });
  const emptyItem = userList.value.find((item) => !item.name || !item.phone);
  if (emptyItem) {
    Tips({ title: "请完善联系人信息" });
    return;
  }
  const params = {
    logo: logoImg.value,
    enterprise_name: enterprise_name.value,
    nature_of_business: nature_of_business.value,
    enterprise_address: enterprise_address.value,
    contacts_json: JSON.stringify(userList.value),
  };
  getSave(params).then((res) => {
    Tips(
      {
        title: res.info,
      },
      {
        tab: 3,
      }
    );
  });
  console.log("确认点击", userList.value);
}
let logoImg = ref("");
let userList = ref([]);
function addUserHandler() {
  userList.value.push({
    name: "",
    phone: "",
  });
}
function delHandler(index: number) {
  userList.value.splice(index, 1);
}
let customCropperRef = ref("");
function chooseCustomImage() {
  customCropperRef.value.chooseImage(0, {
    areaWidth: "300rpx",
    areaHeight: "300rpx",
    exportWidth: "300rpx",
    exportHeight: "300rpx",
    canRotate: false,
    quality: 1,
  });
}
async function onCustomConfirm(rsp) {
  let uploadData: string | File = rsp.path;

  // 如果是 Blob URL，先转换为 base64
  if (rsp.path.startsWith("blob:")) {
    const base64Data = await pathToBase64(rsp.path);
    uploadData = base64Data;
  }
  uploadImgs(
    HTTP_UPLOAD_URL,
    uploadData,
    (res) => {
      uni.hideLoading();
      logoImg.value = res.data.url;
    },
    (err) => {
      uni.hideLoading();
    }
  );
}
</script>
<template>
  <view class="wrap">
    <view class="container">
      <!-- <view class="logo_box flex_fc">
        <view class="img_box flex_c" @click="chooseCustomImage">
          <image :src="logoImg" mode="aspectFill" v-if="logoImg" />
          <text class="iconfont icon-tupian1" v-else></text>
        </view>

        <text class="logo_text">企业头像</text>
      </view> -->
      <view class="item_box flex_s">
        <view class="title blod_class"> 企业名称 </view>
        <view class="input_box">
          <input
            type="text"
            v-model="enterprise_name"
            placeholder="请输入企业名称"
          />
        </view>
      </view>
      <view class="item_box">
        <view class="title blod_class"> 显示地址 </view>
        <view class="input_box address_box">
          <input
            type="text"
            v-model="enterprise_address"
            placeholder="请输入企业地址"
          />
        </view>
      </view>
      <view class="item_box">
        <view class="title blod_class"> 经营范围 </view>
        <!-- <view class="input_box bussiness_box">
          <text class="line1">{{ nature_of_business || "点击输入" }}</text>
          <text class="iconfont icon-xiangyou"></text>
        </view> -->
        <view class="input_box address_box">
          <textarea
            v-model="nature_of_business"
            class="textarea_class"
            placeholder="请输入公司营业范围内容 "
          ></textarea>
        </view>
      </view>
    </view>
    <view class="user_list">
      <view
        class="user_item flex_s"
        v-for="(item, index) in userList"
        :key="index"
      >
        <input type="text" v-model="item.name" placeholder="请输入姓名" />
        <view class="line_class"></view>
        <input
          type="number"
          v-model="item.phone"
          maxlength="11"
          placeholder="请输入手机号"
        />
        <view class="del_class flex_c" @click="delHandler(index)"
          ><text class="iconfont icon-guanbi"></text>
        </view>
      </view>
    </view>
    <view class="add_class flex_c" @click="addUserHandler">
      <text class="iconfont icon-tianjia1"></text>
      <text>添加联系人</text>
    </view>

    <view class="uni-p-b-98"></view>
    <footerBtn @submitHandler="submitHandler" />
    <up-cropper ref="customCropperRef" @confirm="onCustomConfirm" />
  </view>
</template>

<style scoped lang="scss">
.wrap {
  .add_class {
    width: fit-content;
    margin: 40rpx auto;
    font-size: 30rpx;
    color: #272636;
    .iconfont {
      font-size: 35rpx;
      margin-right: 10rpx;
    }
  }
  .user_list {
    padding: 0 40rpx;
    .user_item {
      margin-bottom: 20rpx;
      position: relative;
      background: #fff;
      padding: 25rpx 30rpx;
      border-radius: 11rpx;
      overflow: hidden;
      .del_class {
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        background: #000;
        position: absolute;
        right: 0rpx;
        top: 0rpx;
        .iconfont {
          color: #fff;
          font-size: 15rpx;
        }
        // transform: translateY(-50%);
      }
      .line_class {
        width: 2rpx;
        height: 60rpx;
        background: rgba(244, 243, 243, 1);
        margin: 0 20rpx;
      }
      input {
        text-align: center;
        font-size: 30rpx;
      }
    }
  }
  .container {
    padding: 30rpx;
    background: #fff;
    margin-bottom: 30rpx;
    .item_box {
      padding: 20rpx 0;
      font-size: 30rpx;
      &:not(:last-child) {
        border-bottom: 2rpx solid rgba(244, 243, 243, 1);
      }

      .title {
        flex-shrink: 0;
        margin-right: 20rpx;
        // color: rgba(125, 136, 140, 1);
        color: #000;
      }
      .address_box {
        margin-top: 20rpx;
      }
      .input_box {
        color: rgba(39, 38, 54, 1);
        input {
          font-size: 30rpx;
        }
        .textarea_class {
          text-align: left;
          height: 200rpx;
        }
      }
      .bussiness_box {
        text-align: right;
        width: 500rpx;
        .iconfont {
          font-size: 28rpx;
        }
      }
    }
    .logo_box {
      padding: 67rpx 0 25rpx;
      width: 686rpx;

      margin: 0 auto;
      border-radius: 12rpx;
      overflow: hidden;
      background: rgba(248, 248, 248, 1);
      .iconfont {
        font-size: 50rpx;
        color: #d6ddde;
      }
      .img_box {
        width: 150rpx;
        height: 150rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }

      .logo_text {
        margin-top: 20rpx;
      }
    }
  }
}
</style>
